import React, { useState, useEffect, useRef, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  MapPin,
  Menu,
  X,
  Phone,
  Sparkles,
  Award,
  Star,
  Eye,
  Droplets,
  Scissors,
  Paintbrush,
  ScanFace,
  Flower2,
  HeartPulse,
  GraduationCap,
  Lock,
  Mail,
  User,
  BookOpen,
  Clock,
  CheckCircle2,
  LogOut,
  ChevronRight,
  ChevronLeft,
  Plus,
  Minus,
  ArrowRight
} from 'lucide-react';

const COLORS = {
  gold: '#ceac6f',
  nude: '#dbc5a4',
  grey: '#a6aaab',
  light: '#f7f7f7',
  dark: '#1a1a1a'
};

const IMAGES = {
  hero: 'https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?auto=format&fit=crop&w=1600&q=80',
  cejas: 'https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?auto=format&fit=crop&w=800&q=75',
  labios: 'https://images.unsplash.com/photo-1519699047748-de8e457a634e?auto=format&fit=crop&w=800&q=75',
  delineado: 'https://images.unsplash.com/photo-1583001931096-959e9a1a6223?auto=format&fit=crop&w=800&q=75',
  remocion: 'https://images.unsplash.com/photo-1487412947147-5cebf100ffc2?auto=format&fit=crop&w=800&q=75',
  hidratacionLabios: 'https://images.unsplash.com/photo-1586495777744-4413f21062fa?auto=format&fit=crop&w=800&q=75',
  visajismo: 'https://images.unsplash.com/photo-1457972729786-0411a3b2b626?auto=format&fit=crop&w=800&q=75',
  laminado: 'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=crop&w=800&q=75',
  lifting: 'https://images.unsplash.com/photo-1588006173527-b3e6cf8b1e34?auto=format&fit=crop&w=800&q=75',
  limpiezaFacial: 'https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?auto=format&fit=crop&w=800&q=75',
  maracay: 'https://images.unsplash.com/photo-1560066984-138dadb4c035?auto=format&fit=crop&w=800&q=75',
  caracas: 'https://images.unsplash.com/photo-1521590832167-7bcbfaa6381f?auto=format&fit=crop&w=800&q=75',
};

/* ─── FAQ Item ─── */
interface FAQItemProps { question: string; answer: string; }
const FAQItem: React.FC<FAQItemProps> = ({ question, answer }) => {
  const [open, setOpen] = useState(false);
  return (
    <div className="border-b border-gray-200/60 py-4">
      <button onClick={() => setOpen(!open)} className="w-full flex justify-between items-center text-left group">
        <span className="text-sm md:text-base font-serif group-hover:text-[#ceac6f] transition-colors pr-4">{question}</span>
        {open ? <Minus size={18} color={COLORS.gold} className="flex-shrink-0" /> : <Plus size={18} color={COLORS.gold} className="flex-shrink-0" />}
      </button>
      <AnimatePresence>
        {open && (
          <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: 'auto', opacity: 1 }} exit={{ height: 0, opacity: 0 }} className="overflow-hidden">
            <p className="pt-3 text-gray-500 text-xs md:text-sm leading-relaxed">{answer}</p>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};

/* ─── Service Card compact ─── */
interface ServiceCardProps { icon: React.ReactNode; title: string; desc: string; image: string; }
const ServiceCard: React.FC<ServiceCardProps> = ({ icon, title, desc, image }) => (
  <div className="group relative bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-all duration-500">
    <div className="relative h-40 md:h-48 overflow-hidden">
      <img src={image} alt={title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" loading="lazy" />
      <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
      <div className="absolute bottom-3 left-3 w-10 h-10 rounded-full bg-white/90 backdrop-blur-sm flex items-center justify-center shadow">{icon}</div>
    </div>
    <div className="p-4">
      <h3 className="text-sm md:text-base font-serif mb-1 group-hover:text-[#ceac6f] transition-colors">{title}</h3>
      <p className="text-gray-400 text-xs leading-relaxed line-clamp-2">{desc}</p>
    </div>
  </div>
);

/* ─── Testimonial Carousel ─── */
interface Testimonial {
  name: string;
  location: string;
  service: string;
  text: string;
  stars: number;
}

const TestimonialCarousel: React.FC<{ testimonials: Testimonial[] }> = ({ testimonials }) => {
  const [current, setCurrent] = useState(0);
  const [isPaused, setIsPaused] = useState(false);
  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);

  const totalSlides = testimonials.length;

  const next = useCallback(() => {
    setCurrent((prev) => (prev + 1) % totalSlides);
  }, [totalSlides]);

  const prev = useCallback(() => {
    setCurrent((prev) => (prev - 1 + totalSlides) % totalSlides);
  }, [totalSlides]);

  useEffect(() => {
    if (!isPaused) {
      intervalRef.current = setInterval(next, 4000);
    }
    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, [isPaused, next]);

  // Show 1 on mobile, 3 on desktop
  const getVisible = () => {
    const items: number[] = [];
    for (let i = 0; i < 3; i++) {
      items.push((current + i) % totalSlides);
    }
    return items;
  };

  const visibleIndices = getVisible();

  return (
    <div
      onMouseEnter={() => setIsPaused(true)}
      onMouseLeave={() => setIsPaused(false)}
      className="relative"
    >
      {/* Cards container */}
      <div className="overflow-hidden">
        {/* Mobile: single card */}
        <div className="md:hidden">
          <AnimatePresence mode="wait">
            <motion.div
              key={current}
              initial={{ opacity: 0, x: 60 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -60 }}
              transition={{ duration: 0.4 }}
              className="bg-white p-5 rounded-xl shadow-sm border border-gray-100"
            >
              <div className="flex mb-2">
                {Array.from({ length: testimonials[current].stars }).map((_, j) => (
                  <Star key={j} size={12} fill={COLORS.gold} color={COLORS.gold} />
                ))}
              </div>
              <p className="text-gray-500 text-xs leading-relaxed mb-3 italic">"{testimonials[current].text}"</p>
              <div>
                <p className="font-serif text-xs font-semibold">{testimonials[current].name}</p>
                <div className="flex items-center gap-2 mt-0.5">
                  <span className="text-[9px] text-gray-400 flex items-center gap-0.5"><MapPin size={8} /> {testimonials[current].location}</span>
                  <span className="text-[9px] text-[#ceac6f] font-bold">{testimonials[current].service}</span>
                </div>
              </div>
            </motion.div>
          </AnimatePresence>
        </div>

        {/* Desktop: 3 cards */}
        <div className="hidden md:grid md:grid-cols-3 gap-4">
          {visibleIndices.map((idx, pos) => (
            <motion.div
              key={`${idx}-${pos}`}
              initial={{ opacity: 0, y: 15 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.4, delay: pos * 0.08 }}
              className="bg-white p-5 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow"
            >
              <div className="flex mb-2">
                {Array.from({ length: testimonials[idx].stars }).map((_, j) => (
                  <Star key={j} size={12} fill={COLORS.gold} color={COLORS.gold} />
                ))}
              </div>
              <p className="text-gray-500 text-xs leading-relaxed mb-3 italic">"{testimonials[idx].text}"</p>
              <div>
                <p className="font-serif text-xs font-semibold">{testimonials[idx].name}</p>
                <div className="flex items-center gap-2 mt-0.5">
                  <span className="text-[9px] text-gray-400 flex items-center gap-0.5"><MapPin size={8} /> {testimonials[idx].location}</span>
                  <span className="text-[9px] text-[#ceac6f] font-bold">{testimonials[idx].service}</span>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>

      {/* Controls */}
      <div className="flex items-center justify-center mt-6 gap-4">
        <button
          onClick={prev}
          className="w-9 h-9 rounded-full border border-gray-200 flex items-center justify-center hover:border-[#ceac6f] hover:text-[#ceac6f] transition-colors"
          aria-label="Anterior"
        >
          <ChevronLeft size={16} />
        </button>

        {/* Dots */}
        <div className="flex gap-1.5">
          {testimonials.map((_, i) => (
            <button
              key={i}
              onClick={() => setCurrent(i)}
              className={`h-1.5 rounded-full transition-all duration-300 ${
                i === current ? 'w-6 bg-[#ceac6f]' : 'w-1.5 bg-gray-200 hover:bg-gray-300'
              }`}
              aria-label={`Testimonio ${i + 1}`}
            />
          ))}
        </div>

        <button
          onClick={next}
          className="w-9 h-9 rounded-full border border-gray-200 flex items-center justify-center hover:border-[#ceac6f] hover:text-[#ceac6f] transition-colors"
          aria-label="Siguiente"
        >
          <ChevronRight size={16} />
        </button>
      </div>

      {/* Counter */}
      <p className="text-center mt-2 text-[9px] text-gray-300 uppercase tracking-widest">
        {current + 1} / {totalSlides}
      </p>
    </div>
  );
};

/* ─── Academia Modal ─── */
interface AcademiaModalProps { isOpen: boolean; onClose: () => void; }
const AcademiaModal: React.FC<AcademiaModalProps> = ({ isOpen, onClose }) => {
  const [mode, setMode] = useState<'login' | 'register' | 'dashboard'>('login');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');
  const [logged, setLogged] = useState(false);
  const [error, setError] = useState('');

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    if (!email || !password) { setError('Completa todos los campos'); return; }
    // Demo login
    setLogged(true);
    setMode('dashboard');
  };

  const handleRegister = (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    if (!name || !email || !password) { setError('Completa todos los campos'); return; }
    if (password.length < 6) { setError('La contraseña debe tener al menos 6 caracteres'); return; }
    setLogged(true);
    setMode('dashboard');
  };

  const handleLogout = () => {
    setLogged(false);
    setMode('login');
    setEmail('');
    setPassword('');
    setName('');
  };

  const handleClose = () => {
    onClose();
  };

  const courseModules = [
    { title: "Módulo 1: Fundamentos de Visajismo y Morfología Facial", duration: "4 horas", done: false },
    { title: "Módulo 2: Arquitectura de la Mirada — Diseño de Cejas", duration: "6 horas", done: false },
    { title: "Módulo 3: Colorimetría Aplicada a la Micropigmentación", duration: "4 horas", done: false },
    { title: "Módulo 4: Bioseguridad Clínica — Estándares Internacionales", duration: "5 horas", done: false },
    { title: "Módulo 5: Protocolos de Esterilización y Normativas Sanitarias", duration: "4 horas", done: false },
    { title: "Módulo 6: Práctica Supervisada en Piel Sintética", duration: "8 horas", done: false },
    { title: "Módulo 7: Práctica en Modelo Real + Evaluación Final", duration: "6 horas", done: false },
  ];

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
          onClick={handleClose}
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.95, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.95, y: 20 }}
            transition={{ duration: 0.3 }}
            className="bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto"
            onClick={(e) => e.stopPropagation()}
          >
            {/* Header */}
            <div className="sticky top-0 bg-white z-10 flex items-center justify-between p-5 border-b border-gray-100 rounded-t-2xl">
              <div className="flex items-center gap-2">
                <GraduationCap size={22} color={COLORS.gold} />
                <span className="font-serif text-lg">Academia</span>
              </div>
              <button onClick={handleClose} className="p-1 hover:bg-gray-100 rounded-full transition-colors">
                <X size={20} />
              </button>
            </div>

            <div className="p-5 md:p-6">
              {!logged ? (
                <>
                  {/* Login / Register Toggle */}
                  <div className="flex bg-gray-100 rounded-lg p-1 mb-6">
                    <button
                      onClick={() => { setMode('login'); setError(''); }}
                      className={`flex-1 py-2.5 text-xs uppercase tracking-widest font-bold rounded-md transition-all ${mode === 'login' ? 'bg-white shadow-sm text-[#1a1a1a]' : 'text-gray-400'}`}
                    >
                      Iniciar Sesión
                    </button>
                    <button
                      onClick={() => { setMode('register'); setError(''); }}
                      className={`flex-1 py-2.5 text-xs uppercase tracking-widest font-bold rounded-md transition-all ${mode === 'register' ? 'bg-white shadow-sm text-[#1a1a1a]' : 'text-gray-400'}`}
                    >
                      Registrarse
                    </button>
                  </div>

                  {error && (
                    <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-xs">{error}</div>
                  )}

                  {mode === 'login' ? (
                    <form onSubmit={handleLogin} className="space-y-4">
                      <div>
                        <label className="block text-[10px] uppercase tracking-widest text-gray-400 font-bold mb-1.5">Correo electrónico</label>
                        <div className="relative">
                          <Mail size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-300" />
                          <input
                            type="email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            placeholder="tu@correo.com"
                            className="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-[#ceac6f] transition-colors"
                          />
                        </div>
                      </div>
                      <div>
                        <label className="block text-[10px] uppercase tracking-widest text-gray-400 font-bold mb-1.5">Contraseña</label>
                        <div className="relative">
                          <Lock size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-300" />
                          <input
                            type="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            placeholder="••••••••"
                            className="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-[#ceac6f] transition-colors"
                          />
                        </div>
                      </div>
                      <button type="submit" className="w-full py-3.5 bg-[#1a1a1a] text-white text-xs uppercase tracking-widest font-bold rounded-lg hover:bg-[#ceac6f] transition-colors">
                        Entrar
                      </button>
                    </form>
                  ) : (
                    <form onSubmit={handleRegister} className="space-y-4">
                      <div>
                        <label className="block text-[10px] uppercase tracking-widest text-gray-400 font-bold mb-1.5">Nombre completo</label>
                        <div className="relative">
                          <User size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-300" />
                          <input
                            type="text"
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                            placeholder="Tu nombre"
                            className="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-[#ceac6f] transition-colors"
                          />
                        </div>
                      </div>
                      <div>
                        <label className="block text-[10px] uppercase tracking-widest text-gray-400 font-bold mb-1.5">Correo electrónico</label>
                        <div className="relative">
                          <Mail size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-300" />
                          <input
                            type="email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            placeholder="tu@correo.com"
                            className="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-[#ceac6f] transition-colors"
                          />
                        </div>
                      </div>
                      <div>
                        <label className="block text-[10px] uppercase tracking-widest text-gray-400 font-bold mb-1.5">Contraseña</label>
                        <div className="relative">
                          <Lock size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-300" />
                          <input
                            type="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            placeholder="Mínimo 6 caracteres"
                            className="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-[#ceac6f] transition-colors"
                          />
                        </div>
                      </div>
                      <button type="submit" className="w-full py-3.5 bg-[#1a1a1a] text-white text-xs uppercase tracking-widest font-bold rounded-lg hover:bg-[#ceac6f] transition-colors">
                        Crear Cuenta
                      </button>
                    </form>
                  )}

                  {/* Course preview */}
                  <div className="mt-8 pt-6 border-t border-gray-100">
                    <div className="flex items-center gap-2 mb-3">
                      <BookOpen size={16} color={COLORS.gold} />
                      <span className="text-[10px] uppercase tracking-widest text-[#ceac6f] font-bold">Curso Disponible</span>
                    </div>
                    <div className="bg-gradient-to-br from-[#1a1a1a] to-[#2a2a2a] rounded-xl p-4 text-white">
                      <h4 className="font-serif text-sm md:text-base leading-snug mb-2">Arquitectura de la Mirada y Bioseguridad Clínica con Estándares Internacionales</h4>
                      <div className="flex items-center gap-3 text-[10px] text-gray-400">
                        <span className="flex items-center gap-1"><Clock size={10} /> 37 horas</span>
                        <span className="flex items-center gap-1"><BookOpen size={10} /> 7 módulos</span>
                      </div>
                      <p className="text-[10px] text-[#ceac6f] mt-2 font-bold uppercase tracking-wider">Regístrate para acceder →</p>
                    </div>
                  </div>
                </>
              ) : (
                /* ─── Dashboard alumna ─── */
                <div>
                  <div className="flex items-center justify-between mb-6">
                    <div>
                      <p className="text-xs text-gray-400">Bienvenida,</p>
                      <p className="font-serif text-lg">{name || 'Alumna'}</p>
                    </div>
                    <button onClick={handleLogout} className="flex items-center gap-1.5 text-xs text-gray-400 hover:text-red-400 transition-colors">
                      <LogOut size={14} /> Salir
                    </button>
                  </div>

                  {/* Course Card */}
                  <div className="bg-gradient-to-br from-[#1a1a1a] to-[#2a2a2a] rounded-xl p-5 text-white mb-6">
                    <div className="flex items-start gap-3">
                      <div className="w-10 h-10 rounded-lg bg-[#ceac6f]/20 flex items-center justify-center flex-shrink-0 mt-0.5">
                        <GraduationCap size={20} color={COLORS.gold} />
                      </div>
                      <div>
                        <h4 className="font-serif text-sm md:text-base leading-snug mb-1">Arquitectura de la Mirada y Bioseguridad Clínica</h4>
                        <p className="text-[10px] text-gray-400 mb-3">con Estándares Internacionales</p>
                        <div className="flex items-center gap-3 text-[10px] text-gray-400">
                          <span className="flex items-center gap-1"><Clock size={10} /> 37 horas</span>
                          <span className="flex items-center gap-1"><BookOpen size={10} /> 7 módulos</span>
                        </div>
                        {/* Progress bar */}
                        <div className="mt-3">
                          <div className="flex justify-between text-[10px] mb-1">
                            <span className="text-gray-400">Progreso</span>
                            <span className="text-[#ceac6f] font-bold">0%</span>
                          </div>
                          <div className="w-full h-1.5 bg-white/10 rounded-full overflow-hidden">
                            <div className="h-full bg-[#ceac6f] rounded-full" style={{ width: '0%' }}></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Modules list */}
                  <h5 className="text-[10px] uppercase tracking-widest text-gray-400 font-bold mb-3">Contenido del Curso</h5>
                  <div className="space-y-2">
                    {courseModules.map((mod, i) => (
                      <div key={i} className={`flex items-center gap-3 p-3 rounded-lg border transition-colors ${i === 0 ? 'border-[#ceac6f]/30 bg-[#ceac6f]/5' : 'border-gray-100 bg-gray-50'}`}>
                        <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 text-xs font-bold ${i === 0 ? 'bg-[#ceac6f] text-white' : 'bg-gray-200 text-gray-400'}`}>
                          {i + 1}
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className={`text-xs leading-snug ${i === 0 ? 'text-[#1a1a1a] font-medium' : 'text-gray-400'}`}>{mod.title}</p>
                          <span className="text-[10px] text-gray-400 flex items-center gap-1 mt-0.5"><Clock size={9} /> {mod.duration}</span>
                        </div>
                        {i === 0 ? (
                          <ChevronRight size={16} color={COLORS.gold} className="flex-shrink-0" />
                        ) : (
                          <Lock size={14} className="text-gray-300 flex-shrink-0" />
                        )}
                      </div>
                    ))}
                  </div>

                  <button className="w-full mt-6 py-3.5 bg-[#ceac6f] text-white text-xs uppercase tracking-widest font-bold rounded-lg hover:bg-[#1a1a1a] transition-colors flex items-center justify-center gap-2">
                    <span>Comenzar Módulo 1</span>
                    <ArrowRight size={14} />
                  </button>
                </div>
              )}
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};

/* ════════════════════════════════════════════════
   APP PRINCIPAL
   ════════════════════════════════════════════════ */
export function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [academiaOpen, setAcademiaOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Lock body scroll when modals open
  useEffect(() => {
    document.body.style.overflow = (isMenuOpen || academiaOpen) ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [isMenuOpen, academiaOpen]);

  const services = [
    { icon: <Paintbrush size={18} color={COLORS.gold} />, title: "Micropigmentación de Cejas", desc: "Técnica pelo a pelo hiperrealista para cejas naturales y duraderas.", image: IMAGES.cejas },
    { icon: <HeartPulse size={18} color={COLORS.gold} />, title: "Micropigmentación de Labios", desc: "Color, definición y volumen visual para labios perfectos 24/7.", image: IMAGES.labios },
    { icon: <Eye size={18} color={COLORS.gold} />, title: "Delineado de Ojos", desc: "Mirada definida con delineado permanente de alta precisión.", image: IMAGES.delineado },
    { icon: <Sparkles size={18} color={COLORS.gold} />, title: "Remoción Química de Cejas", desc: "Corrección segura de micropigmentaciones anteriores.", image: IMAGES.remocion },
    { icon: <Droplets size={18} color={COLORS.gold} />, title: "Hidratación de Labios", desc: "Nutrición profunda que devuelve suavidad y luminosidad.", image: IMAGES.hidratacionLabios },
    { icon: <ScanFace size={18} color={COLORS.gold} />, title: "Visajismo", desc: "Estudio de armonía facial para diseñar tu look ideal.", image: IMAGES.visajismo },
    { icon: <Scissors size={18} color={COLORS.gold} />, title: "Laminado de Cejas", desc: "Cejas peinadas, ordenadas y con volumen por semanas.", image: IMAGES.laminado },
    { icon: <Flower2 size={18} color={COLORS.gold} />, title: "Lifting de Pestañas", desc: "Curvatura natural y duradera sin extensiones.", image: IMAGES.lifting },
    { icon: <Award size={18} color={COLORS.gold} />, title: "Limpiezas Faciales con Aparatología", desc: "Tecnología avanzada para una piel renovada y luminosa.", image: IMAGES.limpiezaFacial },
  ];

  const faqs = [
    { question: "¿Duele el procedimiento?", answer: "Aplicamos anestesia tópica de grado médico. La mayoría de clientas califican el dolor como un 2 de 10." },
    { question: "¿Cuánto dura el resultado?", answer: "Entre 12 y 18 meses dependiendo del tipo de piel. Recomendamos retoque anual." },
    { question: "¿Cuáles son los cuidados posteriores?", answer: "Evitar sol directo, piscinas y ejercicio intenso por 7 días. Incluimos kit de cuidado post-procedimiento." },
    { question: "¿Atienden en Maracay y Caracas?", answer: "Sí. Estudio principal en Maracay y auxiliar en Caracas. Agenda en la sede más conveniente." },
    { question: "¿Qué incluye la limpieza facial?", answer: "Diagnóstico de piel, ultrasonido, extracción, alta frecuencia, mascarilla personalizada y protección solar." },
  ];

  const testimonials: Testimonial[] = [
    { name: "María Fernanda R.", location: "Maracay", service: "Micropigmentación de Cejas", text: "Chairy transformó mis cejas por completo. El resultado es tan natural que nadie cree que son micropigmentadas. ¡Estoy encantada!", stars: 5 },
    { name: "Ana Gabriela M.", location: "Caracas", service: "Delineado de Ojos", text: "Me hice el delineado permanente y mi mirada cambió totalmente. Ya no necesito maquillaje diario. ¡Espectacular trabajo!", stars: 5 },
    { name: "Carolina P.", location: "Maracay", service: "Limpieza Facial", text: "La limpieza facial con aparatología dejó mi piel luminosa desde la primera sesión. Súper profesional y relajante.", stars: 5 },
    { name: "Daniela Suárez", location: "Maracay", service: "Micropigmentación de Labios", text: "Mis labios quedaron con un color hermoso y muy natural. Ya no uso labial y me veo arreglada siempre. ¡Lo mejor que he hecho!", stars: 5 },
    { name: "Valentina Herrera", location: "Caracas", service: "Visajismo", text: "El estudio de visajismo me ayudó a entender qué forma de cejas me favorece realmente. Chairy es una artista de verdad.", stars: 5 },
    { name: "Gabriela Martínez", location: "Maracay", service: "Laminado de Cejas", text: "Mis cejas estaban desordenadas y sin forma. Después del laminado quedaron perfectas, peinadas y con volumen. ¡Increíble!", stars: 5 },
    { name: "Isabella Torres", location: "Caracas", service: "Lifting de Pestañas", text: "El lifting le dio a mis pestañas una curvatura preciosa sin necesidad de extensiones. Duró semanas y se veía muy natural.", stars: 5 },
    { name: "Andrea Rodríguez", location: "Maracay", service: "Hidratación de Labios", text: "Tenía los labios súper resecos y agrietados. Después del tratamiento quedaron suaves, hidratados y con un brillo hermoso.", stars: 5 },
    { name: "Sofía Mendoza", location: "Caracas", service: "Remoción Química", text: "Tenía una micropigmentación anterior que no me gustaba. Chairy hizo la remoción con mucho cuidado y el resultado fue excelente.", stars: 5 },
    { name: "Camila Gutiérrez", location: "Maracay", service: "Micropigmentación de Cejas", text: "Después de años dibujándome las cejas cada mañana, ahora me levanto perfecta. El mejor regalo que me he dado.", stars: 5 },
    { name: "Laura Pérez", location: "Caracas", service: "Delineado de Ojos", text: "Siempre quise un delineado perfecto pero no tenía pulso. Ahora mis ojos se ven definidos todo el tiempo. ¡100% recomendada!", stars: 5 },
    { name: "Patricia Vargas", location: "Maracay", service: "Limpieza Facial", text: "Mi piel tenía muchas impurezas y puntos negros. Después de la limpieza con aparatología se ve completamente renovada. Volveré cada mes.", stars: 5 },
  ];

  return (
    <div className="min-h-screen bg-[#F7F7F7] font-sans text-[#1a1a1a] selection:bg-[#ceac6f] selection:text-white antialiased">

      {/* ═══ NAV ═══ */}
      <nav className={`fixed w-full h-16 md:h-20 z-[100] transition-all duration-500 flex items-center ${scrolled ? 'bg-white/95 backdrop-blur-md shadow-sm' : 'bg-transparent'}`}>
        <div className="container mx-auto px-4 md:px-10 flex justify-between items-center">
          <a href="#" className="text-base md:text-xl font-serif tracking-[0.15em] md:tracking-[0.25em] uppercase">
            CHAIRY <span style={{ color: COLORS.gold }}>M</span>
          </a>

          <div className="hidden md:flex items-center gap-8 text-[10px] tracking-[0.3em] uppercase font-bold">
            <a href="#servicios" className="hover:text-[#ceac6f] transition-colors">Servicios</a>
            <a href="#ubicaciones" className="hover:text-[#ceac6f] transition-colors">Ubicaciones</a>
            <a href="#faq" className="hover:text-[#ceac6f] transition-colors">Dudas</a>
            <button onClick={() => setAcademiaOpen(true)} className="hover:text-[#ceac6f] transition-colors flex items-center gap-1.5">
              <GraduationCap size={14} /> Academia
            </button>
            <a href="https://wa.me/tu_numero" className="px-6 py-3 bg-[#1a1a1a] text-white hover:bg-[#ceac6f] transition-all rounded-sm">Agendar</a>
          </div>

          <button className="md:hidden p-2" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <X size={22} /> : <Menu size={22} />}
          </button>
        </div>
      </nav>

      {/* ═══ MENÚ MÓVIL ═══ */}
      <AnimatePresence>
        {isMenuOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-[99] bg-white pt-16 px-6 md:hidden overflow-y-auto"
          >
            <div className="flex flex-col text-center text-xs tracking-[0.25em] uppercase font-bold">
              {['Servicios', 'Ubicaciones', 'Dudas'].map((label) => (
                <a
                  key={label}
                  href={`#${label.toLowerCase()}`}
                  onClick={() => setIsMenuOpen(false)}
                  className="py-5 border-b border-gray-100 hover:text-[#ceac6f] transition-colors"
                >{label}</a>
              ))}
              <button
                onClick={() => { setIsMenuOpen(false); setAcademiaOpen(true); }}
                className="py-5 border-b border-gray-100 hover:text-[#ceac6f] transition-colors flex items-center justify-center gap-2"
              >
                <GraduationCap size={16} /> Academia
              </button>
              <a href="https://wa.me/tu_numero" className="mt-6 py-4 bg-[#1a1a1a] text-white hover:bg-[#ceac6f] transition-all rounded-sm">
                Agendar Cita
              </a>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* ═══ ACADEMIA MODAL ═══ */}
      <AcademiaModal isOpen={academiaOpen} onClose={() => setAcademiaOpen(false)} />

      {/* ═══ HERO (compacto) ═══ */}
      <section className="relative h-[85vh] md:h-[90vh] flex items-center overflow-hidden bg-[#dbc5a4]">
        <div className="absolute inset-0 z-0">
          <div className="absolute inset-0 bg-gradient-to-r from-[#F7F7F7] via-[#F7F7F7]/50 to-transparent z-10" />
          <img
            src={IMAGES.hero}
            className="w-full h-full object-cover object-center"
            loading="eager"
            alt="Micropigmentación profesional de cejas, labios y delineado"
          />
        </div>

        <div className="relative z-20 container mx-auto px-5 md:px-10">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="max-w-2xl"
          >
            <span className="inline-block px-3 py-1 border border-[#ceac6f] text-[#ceac6f] text-[9px] uppercase tracking-[0.4em] mb-5 font-bold">
              Micropigmentación & Beauty
            </span>
            <h1 className="text-4xl md:text-6xl lg:text-7xl font-serif leading-[0.9] mb-5 text-[#1a1a1a]">
              Diseño que <br />
              <span className="italic font-light" style={{ color: COLORS.gold }}>inspira</span>
            </h1>
            <p className="max-w-md text-gray-500 text-sm md:text-base mb-6 font-light leading-relaxed">
              Cejas, labios y delineado de ojos con técnicas avanzadas de micropigmentación hiperrealista.
            </p>
            <a href="https://wa.me/tu_numero" className="inline-block bg-[#1a1a1a] text-white px-8 py-4 text-[10px] tracking-[0.25em] uppercase font-bold hover:bg-[#ceac6f] transition-all shadow-xl">
              Evaluación gratuita
            </a>
            <div className="flex items-center gap-4 mt-6 text-[10px] text-gray-400 uppercase tracking-[0.15em]">
              <span className="flex items-center gap-1"><MapPin size={12} color={COLORS.gold} /> Maracay</span>
              <span className="w-1 h-1 rounded-full bg-[#ceac6f]"></span>
              <span className="flex items-center gap-1"><MapPin size={12} color={COLORS.gold} /> Caracas</span>
            </div>
          </motion.div>
        </div>
      </section>

      {/* ═══ SERVICIOS (compacto) ═══ */}
      <section id="servicios" className="py-14 md:py-20 bg-white">
        <div className="container mx-auto px-4 md:px-10">
          <div className="text-center mb-10 md:mb-14">
            <span className="text-[10px] uppercase tracking-[0.4em] text-[#ceac6f] font-bold">Nuestros Servicios</span>
            <h2 className="text-2xl md:text-4xl font-serif mt-2">Belleza de Precisión</h2>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-5">
            {services.map((s, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.4, delay: i * 0.05 }}
              >
                <ServiceCard icon={s.icon} title={s.title} desc={s.desc} image={s.image} />
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ═══ MÉTODO (simplificado — 3 pasos) ═══ */}
      <section className="py-14 md:py-20 bg-[#F7F7F7]">
        <div className="container mx-auto px-4 md:px-10">
          <div className="text-center mb-10">
            <span className="text-[10px] uppercase tracking-[0.4em] text-[#ceac6f] font-bold">Nuestro Método</span>
            <h2 className="text-2xl md:text-4xl font-serif mt-2">3 Pasos Simples</h2>
          </div>
          <div className="grid md:grid-cols-3 gap-5 max-w-4xl mx-auto">
            {[
              { step: "01", title: "Consulta & Visajismo", desc: "Evaluación personalizada de tus rasgos y diseño previo para tu aprobación." },
              { step: "02", title: "Procedimiento", desc: "Aplicación con técnica de precisión, anestesia tópica y máxima higiene." },
              { step: "03", title: "Seguimiento", desc: "Kit de cuidado incluido, revisión de cicatrización y retoque garantizado." },
            ].map((item, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.4, delay: i * 0.1 }}
                className="text-center bg-white p-6 md:p-8 rounded-xl hover:shadow-md transition-all"
              >
                <div className="text-4xl font-serif text-[#ceac6f]/25 mb-2">{item.step}</div>
                <h3 className="text-base font-serif mb-2">{item.title}</h3>
                <p className="text-gray-400 text-xs leading-relaxed">{item.desc}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ═══ UBICACIONES + TESTIMONIOS (combinados) ═══ */}
      <section id="ubicaciones" className="py-14 md:py-20 bg-white">
        <div className="container mx-auto px-4 md:px-10">
          <div className="text-center mb-10">
            <span className="text-[10px] uppercase tracking-[0.4em] text-[#ceac6f] font-bold">Dónde Encontrarnos</span>
            <h2 className="text-2xl md:text-4xl font-serif mt-2">Nuestras Sedes</h2>
          </div>

          <div className="grid md:grid-cols-2 gap-4 max-w-4xl mx-auto mb-14 md:mb-16">
            {[
              { name: "Maracay", sub: "Aragua · Estudio Principal", badge: "Principal", badgeClass: "bg-[#ceac6f] text-white", img: IMAGES.maracay },
              { name: "Caracas", sub: "Distrito Capital · Estudio Auxiliar", badge: "Auxiliar", badgeClass: "bg-white/20 backdrop-blur-sm text-white", img: IMAGES.caracas },
            ].map((loc, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.4, delay: i * 0.1 }}
                className="relative group overflow-hidden rounded-xl"
              >
                <div className="relative h-48 md:h-56 overflow-hidden">
                  <img src={loc.img} alt={`Estudio ${loc.name}`} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" loading="lazy" />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent" />
                  <span className={`absolute top-3 left-3 px-3 py-1 text-[9px] uppercase tracking-[0.2em] font-bold rounded-full ${loc.badgeClass}`}>{loc.badge}</span>
                  <div className="absolute bottom-0 left-0 right-0 p-5 text-white">
                    <div className="flex items-center gap-2 mb-1">
                      <MapPin size={16} color={COLORS.gold} />
                      <h3 className="text-xl font-serif">{loc.name}</h3>
                    </div>
                    <p className="text-white/60 text-xs">{loc.sub}</p>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>

          {/* Testimonios Carrusel */}
          <div className="text-center mb-8">
            <span className="text-[10px] uppercase tracking-[0.4em] text-[#ceac6f] font-bold">Experiencias</span>
            <h3 className="text-xl md:text-2xl font-serif mt-2">Lo que dicen nuestras clientas</h3>
          </div>
          <div className="max-w-5xl mx-auto">
            <TestimonialCarousel testimonials={testimonials} />
          </div>
        </div>
      </section>

      {/* ═══ FAQ (compacto) ═══ */}
      <section id="faq" className="py-14 md:py-20 bg-[#F7F7F7]">
        <div className="container mx-auto px-4 md:px-10 max-w-3xl">
          <div className="text-center mb-10">
            <span className="text-[10px] uppercase tracking-[0.4em] text-[#ceac6f] font-bold">Dudas</span>
            <h2 className="text-2xl md:text-4xl font-serif mt-2">Preguntas Frecuentes</h2>
          </div>
          <div className="bg-white p-5 md:p-8 rounded-xl">
            {faqs.map((faq, i) => (
              <FAQItem key={i} question={faq.question} answer={faq.answer} />
            ))}
          </div>
        </div>
      </section>

      {/* ═══ CTA FINAL (compacto) ═══ */}
      <section className="py-14 md:py-20 bg-[#1a1a1a] text-white text-center">
        <div className="container mx-auto px-4 md:px-10">
          <h2 className="text-2xl md:text-4xl font-serif mb-4">¿Lista para realzar tu belleza?</h2>
          <p className="text-gray-400 max-w-md mx-auto mb-8 text-sm font-light">
            Agenda tu consulta gratuita en Maracay o Caracas.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-3">
            <a href="https://wa.me/tu_numero" className="inline-block bg-[#ceac6f] text-white px-8 py-4 text-[10px] tracking-[0.2em] uppercase font-bold hover:bg-white hover:text-[#1a1a1a] transition-all">
              Agendar en Maracay
            </a>
            <a href="https://wa.me/tu_numero" className="inline-block border border-white/30 text-white px-8 py-4 text-[10px] tracking-[0.2em] uppercase font-bold hover:bg-white hover:text-[#1a1a1a] transition-all">
              Agendar en Caracas
            </a>
          </div>
        </div>
      </section>

      {/* ═══ FOOTER (simplificado) ═══ */}
      <footer className="py-10 bg-white border-t border-gray-100">
        <div className="container mx-auto px-4 md:px-10 flex flex-col md:flex-row justify-between items-center gap-5">
          <span className="text-sm font-serif tracking-[0.15em] uppercase">CHAIRY <span style={{ color: COLORS.gold }}>MONASTERIOS</span></span>
          <div className="flex flex-wrap justify-center gap-5 text-[10px] tracking-[0.3em] uppercase font-bold text-gray-400">
            <a href="#servicios" className="hover:text-[#ceac6f]">Servicios</a>
            <a href="#" className="hover:text-[#ceac6f]">Instagram</a>
            <a href="https://wa.me/tu_numero" className="hover:text-[#ceac6f]">WhatsApp</a>
            <button onClick={() => setAcademiaOpen(true)} className="hover:text-[#ceac6f] flex items-center gap-1"><GraduationCap size={10} /> Academia</button>
          </div>
          <p className="text-[9px] text-gray-300 uppercase tracking-widest">&copy; {new Date().getFullYear()} Todos los derechos reservados</p>
        </div>
      </footer>

      {/* ═══ WHATSAPP FAB ═══ */}
      <a
        href="https://wa.me/tu_numero"
        className="fixed bottom-5 right-5 z-[150] bg-[#25D366] text-white p-3.5 md:p-4 rounded-full shadow-xl hover:scale-110 transition-transform flex items-center group"
        aria-label="WhatsApp"
      >
        <Phone size={20} fill="white" />
        <span className="max-w-0 overflow-hidden group-hover:max-w-xs group-hover:ml-3 transition-all duration-500 whitespace-nowrap text-[9px] uppercase tracking-widest font-bold hidden md:inline">
          Agendar
        </span>
      </a>
    </div>
  );
}

export default App;